<template>
  <div class="docker-builder">
    <div class="file-selector">
      <button class="select-button" @click="triggerFileInput">
        选择 Dockerfile
      </button>
      <input
        id="dockerfile-input"
        ref="fileInput"
        type="file"
        @change="handleFileSelect"
        accept="*"
        style="display: none"
      />
      <input
        type="text"
        v-model="dockerfilePath"
        readonly
        placeholder="Default Dockerfile"
        class="path-input"
      />
      <button class="save-button" @click="saveDockerfile" :disabled="!canBuild">
        保存 Dockerfile
      </button>
    </div>

    <div class="editor-container">
      <textarea
        v-model="dockerfileContent"
        class="dockerfile-editor"
        placeholder="在此编辑 Dockerfile 内容..."
        spellcheck="false"
      ></textarea>
    </div>

    <button
      class="build-button"
      :disabled="!canBuild"
      @click="buildImage"
    >
      构建镜像
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'

const selectedFile = ref<File | null>(null)
const dockerfileContent = ref(`# Dockerfile 模板
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
`)
const dockerfilePath = ref('Default Dockerfile')
const fileInput = ref<HTMLInputElement | null>(null)

const canBuild = computed(() => dockerfileContent.value.trim().length > 0)

const triggerFileInput = () => {
  fileInput.value?.click()
}

const handleFileSelect = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    selectedFile.value = input.files[0]
    dockerfilePath.value = selectedFile.value.name

    const reader = new FileReader()
    reader.onload = (e) => {
      dockerfileContent.value = e.target?.result as string || ''
    }
    reader.readAsText(selectedFile.value)
  }
}

const saveDockerfile = () => {
  if (!selectedFile.value) {
    alert('请先选择 Dockerfile 文件')
    return
  }

  const blob = new Blob([dockerfileContent.value], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = selectedFile.value.name || 'Dockerfile'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

const buildImage = async () => {
  try {
    const result = await (window as any).pywebview.api.buildImage(dockerfileContent.value)
    console.log('构建结果:', result)
    alert(`镜像构建成功: ${result}`)
  } catch (error) {
    console.error('构建失败:', error)
    alert('镜像构建失败，请检查 Dockerfile 内容')
  }
}
</script>

<style scoped>
.docker-builder {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  height: 100%;
}

.file-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.path-input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.select-button, .save-button, .build-button {
  padding: 8px 16px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.select-button {
  background-color: #2196F3;
}

.select-button:hover {
  background-color: #0b7dda;
}

.save-button {
  background-color: #ff9800;
}

.save-button:hover:not(:disabled) {
  background-color: #e68a00;
}

.save-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.editor-container {
  flex: 1;
  min-height: 300px;
}

.dockerfile-editor {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  resize: none;
  white-space: pre;
}

.build-button {
  background-color: #4CAF50;
}

.build-button:hover:not(:disabled) {
  background-color: #45a049;
}

.build-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>
